import React, {useEffect, useState} from 'react';
import {bindActionCreators} from "redux";
import {connect} from "react-redux";
import {setFieldData, setFieldIdData} from "../../../../../../redux/actions/helper";
import {Row, Col, Button, Fade} from "reactstrap";
import {
  ADD_SCHEDULABLE_PASSENGERS,
  DELETE_SCHEDULABLE_PASSENGERS,
  SET_SCHEDULABLE_FIELD,
  SET_SCHEDULABLE_PASSENGERS
} from "../../../../../../redux/constants/schedules";
import {Delete, Minus, Plus, Trash} from "react-feather";


const Passengers = props => {
  const {setFieldIdData, setFieldData, title, passengers, numberDesc, validatePassengers, setValidatePassengers} = props;
  const [isAdded, setIsAdded] = useState(false);
  const [passenger, setPassenger] = useState({name: '', number: ''});
  const [validatePassenger, setValidatePassenger] = useState(false);

  const addPassenger = () => {
    if (passenger.name) {
      setValidatePassenger(false)
      setFieldData(ADD_SCHEDULABLE_PASSENGERS, 'passengers', passenger)
      setPassenger({name: '', number: ''})
    } else setValidatePassenger(true)
  }

  const setName = (value, id) => {
    const idx = validatePassengers.indexOf(id)
    let passengers = [];
    if (idx !== -1) {
      passengers = passengers.concat(validatePassengers)
      passengers.splice(idx, 1)
      setValidatePassengers(passengers)
    }
    setFieldIdData(SET_SCHEDULABLE_PASSENGERS, 'name', value, id)
  }

  return (
    <React.Fragment>
      <div className="schedule-passengers-name mt-4 mb-1">{title}</div>
      <Row>
        <Col className="schedule-passengers-card">
          {
            passengers.map((value, id) => {
              return <Row className={"mt-1"} key={id}>
                <Col md={5}>
                  <input placeholder={'Имя Фамилия'}
                         onChange={e => {
                           setName(e.target.value, id)
                         }}
                         value={value.name || ''}
                         className={`schedule-item schedule-input ${validatePassengers.indexOf(id) !== -1 ? 'custom-input-invalid' : ''}`}/>
                </Col>
                <Col md={7} className="mt-1 mt-md-0">
                  <Row>
                    <Col xs={8} sm={9}>
                      <input placeholder={numberDesc}
                             onChange={e => setFieldIdData(SET_SCHEDULABLE_PASSENGERS, 'number', e.target.value, id)}
                             value={value.number || ''}
                             className={`schedule-item schedule-input`}/>
                    </Col>
                    <Col xs={4} sm={3} className="d-flex justify-content-end justify-content-md-start">
                      <Button.Ripple className="p-1" outline color="danger"
                                     onClick={() => {
                                       setFieldIdData(DELETE_SCHEDULABLE_PASSENGERS, 'passengers', {}, id)
                                       setValidatePassengers([])
                                     }}>
                        <Trash size={14}/>
                      </Button.Ripple>
                    </Col>
                  </Row>
                </Col>
              </Row>
            })
          }
        </Col>
      </Row>
      <Row className="mt-1">
        <Col>
          {
            !isAdded ?
              <Button.Ripple className="not-colored-button" outline onClick={() => setIsAdded(true)}
                             color="primary">Добавить <Plus
                size={14}/></Button.Ripple>
              :
              <Button.Ripple className="not-colored-button" outline onClick={() => setIsAdded(false)}
                             color="danger">Скрыть <Minus
                size={14}/></Button.Ripple>
          }
          <Fade in={isAdded} unmountOnExit>
            <Row className="mt-1">
              <Col md={5} className="mt-1">
                <input placeholder={'Имя Фамилия'}
                       onChange={e => {
                         validatePassenger && setValidatePassenger(false)
                         setPassenger({...passenger, name: e.target.value})
                       }}
                       value={passenger.name || ''}
                       className={`schedule-item schedule-input ${validatePassenger ? 'custom-input-invalid' : ''}`}/>
              </Col>
              <Col md={7}>
                <Row>
                  <Col xs={8} sm={9} className="mt-1">
                    <input placeholder={numberDesc}
                           onChange={e => setPassenger({...passenger, number: e.target.value})}
                           value={passenger.number || ''}
                           className={`schedule-item schedule-input`}/>
                  </Col>
                  <Col xs={4} sm={3} className="mt-1 d-flex justify-content-end justify-content-md-start">
                    <Button.Ripple className="p-1" outline color="primary"
                                   onClick={addPassenger}>
                      <Plus size={14}/>
                    </Button.Ripple>
                  </Col>
                </Row>
              </Col>
            </Row>
          </Fade>
        </Col>
      </Row>
    </React.Fragment>
  );

}

const mapStateToProps = state => ({
  passengers: state.schedules.schedule.passengers
});
const mapDispatchToProps = dispatch => bindActionCreators({
  setFieldIdData,
  setFieldData
}, dispatch);

export default connect(mapStateToProps, mapDispatchToProps)(Passengers);
